<template>
    <el-card class="visitor_container">
        <div class="visitorTop">
            <div class="left">
                <span class="free">{{ user.isInsure ? '医保' : '自费' }}</span>
                <span class="userName">{{ user.name }}</span>
            </div>
            <div class="right">
                <el-button @click.stop="handler" type="primary" round size="small" :icon="Edit"></el-button>
                <el-popconfirm v-if="showDelete" @confirm="removeUser(user.id)" :title="`你确定要删除${user.name}?`">
                    <template #reference>
                        <el-button type="danger" round size="small" :icon="Delete"></el-button>
                    </template>
                </el-popconfirm>
            </div>
        </div>
        <div class="visitorBottom">
            <p>证件类型:{{ user.param.certificatesTypeString }}</p>
            <p>证件号码:{{ user.certificatesNo }}</p>
            <p>用户性别:{{ user.sex ? '男士' : '女士' }}</p>
            <p>出生日期:{{ user.createTime }}</p>
            <p>手机号码:{{ user.phone }}</p>
            <p>婚姻状况:{{ user.isMarry ? '已婚' : '未婚' }}</p>
            <p>当前住址:{{ user.param.cityString || '暂未填写' }}</p>
            <p>详细地址:{{ user.param.fullAddress || '暂未填写' }}</p>
        </div>
        <!-- 红色已经选择的盒子 -->
        <transition name="confirm">
            <div v-show="index === currentIndex" class="confirm">
                已选择
            </div>
        </transition>
    </el-card>
</template>

<script setup lang="ts">
import { Edit, Delete } from '@element-plus/icons-vue';
import { reqRemoveUser } from '@/api/user';
import { useRoute, useRouter } from "vue-router";
// @ts-ignore
import { ElMessage } from 'element-plus';
let $route = useRoute();
let $router = useRouter();
let props = defineProps(['user', 'currentIndex', 'index', 'showDelete'])
let $emit = defineEmits(['changeScene', 'changeRemove'])

const handler = () => {
    // 要么是就诊人管理模块点击修改按钮
    // 要么预约挂号点击修改按钮
    if ($route.path == "/user/patient") {
        $emit("changeScene", props.user);
    } else {
        // 路由跳转携带参数
        $router.push({ path: "/user/patient", query: { type: "edit", id: props.user.id } });
    }
}
const removeUser = async (id: number) => {
    let { code } = await reqRemoveUser(id);
    if (code === 200) {
        ElMessage({
            type: 'success',
            message: '删除成功'
        });
        $emit('changeRemove')
    } else {
        ElMessage({
            type: 'error',
            message: '删除失败'
        })
    }
}
</script>

<style scoped lang="scss">
.visitor_container {
    position: relative;
    font-size: 14px;

    .visitorTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background: rgb(232, 232, 232);


        .left {
            display: flex;
            align-items: center;

            .free {
                text-align: center;
                min-width: 44px;
                padding: 6px 10px;
                border-radius: 3px;
                background: #FFFFFF;
                margin-right: 10px;
                font-size: 12px;
            }
        }

    }

    .visitorBottom {
        padding: 10px 16px;

        p {
            margin-bottom: 16px;
            word-wrap: break-word;
        }
    }

    :deep(.el-card__body) {
        padding: 0 !important;
    }

    .confirm {
        font-size: 34px;
        color: rgba(250, 0, 0, 0.3);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(35deg);
        border: 1px solid rgba(250, 0, 0, 0.3);
        width: 150px;
        height: 150px;
        text-align: center;
        line-height: 150px;
        border-radius: 50%;
    }

    .confirm-enter-from {
        transform: translate(-50%, -50%) scale(1.2) rotate(35deg);
    }

    .confirm-enter-active {
        transition: all 0.5s;
    }

    .confirm-enter-to {
        transform: translate(-50%, -50%) scale(1) rotate(35deg);
    }
}

@media (max-width:768px) {
    .visitor_container {
        font-size: 12px;

        .visitorTop {
            .right {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;

                .el-button:nth-child(2) {
                    margin: 0;
                }

                .el-button:nth-child(1) {
                    margin-bottom: 2px;
                }
            }
        }
    }

    .confirm {
        font-size: 28px !important;
        width: 120px !important;
        height: 120px !important;
        line-height: 120px !important;
    }
}
</style>